<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      class="searchform"
      size="small"
      label-width="68px"
    >
      <el-row :gutter="20">
        <el-col :xs="10" :sm="6" :md="6" :lg="5">
          <el-form-item label="学生姓名">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入学生姓名"
              maxlength="10"
              clearable
              @input="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="role != 'teacher'" :xs="10" :sm="6" :md="6" :lg="4">
          <el-form-item label="班级" label-width="48px">
            <el-select
              v-model="queryParams.psyClass"
              placeholder="请选择班级"
              clearable
              @change="handleQuery"
            >
              <el-option
                v-for="item in CategoryIdList"
                :key="item.categoryId"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="10" :sm="6" :md="6" :lg="4">
          <el-form-item label="学号" prop="title" label-width="48px">
            <el-input
              v-model="queryParams.stunum"
              placeholder="请输入学号"
              maxlength="20"
              clearable
              @input="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="10" :sm="6" :md="6" :lg="7">
          <!--   咨询时间   -->
          <el-form-item label="咨询时间">
            <el-date-picker
              v-model="date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              unlink-panels
              clearable
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              @change="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="10" :sm="6" :md="6" :lg="4">
          <el-form-item label="赴约状态" prop="Status">
            <el-select
              v-model="queryParams.statusType"
              placeholder="全部"
              clearable
              @change="handleQuery"
            >
              <el-option
                v-for="(dict, index) in keep"
                :key="index"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="role != 'teacher'" :xs="10" :sm="6" :md="6" :lg="5">
          <el-form-item label="咨询师" prop="teacherName">
            <el-select
              v-model="queryParams.teacherName"
              placeholder="全部"
              clearable
              @change="handleQuery"
            >
              <el-option
                v-for="item in teacherList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="15" :sm="8" :md="8" :lg="10">
          <el-form-item style="display: block; text-align: start">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="titleclass">
      <span>统计:</span>
      <span
      >咨询时长：{{ parseInt(recordtotaltime / 60) }}小时{{
          recordtotaltime % 60
        }}分钟</span
      >
      <span>咨询次数：{{ total }}</span>
    </div>
    <el-table v-loading="loading" :data="appointmentList" fit>
      <el-table-column min-width="70" label="序号" align="center" prop="sort" />
      <el-table-column
        min-width="80"
        :show-overflow-tooltip="true"
        label="学生姓名"
        align="center"
        prop="studentName"
      />
      <el-table-column
        min-width="100"
        label="班级"
        align="center"
        prop="class"
      />
      <el-table-column
        min-width="70"
        :show-overflow-tooltip="true"
        label="学号"
        align="center"
        prop="stuNmu"
      />
      <el-table-column
        min-width="70"
        :show-overflow-tooltip="true"
        label="手机号"
        align="center"
        prop="phoneNumber"
      />
      <el-table-column
        min-width="80"
        label="咨询师"
        align="center"
        prop="teacherName"
      />
      <el-table-column
        min-width="120"
        :show-overflow-tooltip="true"
        label="问题描述"
        align="center"
        prop="content"
      />
      <el-table-column
        min-width="180"
        label="咨询时间"
        align="center"
        prop="psySchedulingdate"
      >
        <template slot-scope="scope">
          <p v-show="scope.row.psySchedulingdate != null">
            {{ scope.row.psySchedulingdate }}&nbsp;&nbsp;{{
              scope.row.psySchedulingstartTime
            }}-{{ scope.row.psySchedulingendTime }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        min-width="80"
        label="咨询方式"
        align="center"
        prop="mode"
      />
      <el-table-column
        min-width="80"
        label="咨询类型"
        align="center"
        prop="peopleType"
      >
        <template slot-scope="scope">
          <p
            v-show="
              scope.row.peopleType && scope.row.content !== '该学生已注销'
            "
          >
            {{ scope.row.peopleType == "0" ? "个人预约" : "团体预约" }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        min-width="80"
        label="咨询时长"
        align="center"
        prop="duration"
      >
        <template slot-scope="scope">
          <p
            v-show="scope.row.duration && scope.row.content !== '该学生已注销'"
          >
            {{ scope.row.duration }}分钟
          </p>
        </template>
      </el-table-column>
      <el-table-column
        min-width="80"
        label="禁用剩余时长"
        align="center"
        prop="remainingForbiddenHour"
      >
        <template slot-scope="scope">
          <p
            v-show="
              scope.row.remainingForbiddenHour &&
              scope.row.content !== '该学生已注销'
            "
          >
            {{ scope.row.remainingForbiddenHour }}小时
          </p>
        </template>
      </el-table-column>

      <el-table-column min-width="80" label="赴约状态" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.arrive === '0'"
            type="danger"
            @click="changedetail(scope.row)"
          >未到
          </el-button>
          <el-button v-if="scope.row.arrive === '1'" type="primary"
          >已到</el-button
          >
        </template>
      </el-table-column>

      <el-table-column
        min-width="80"
        label="咨询状态"
        align="center"
        prop="status"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_come_go"
            :value="scope.row.status"
          />
          <p v-if="scope.row.status == 0">待开始</p>
          <p v-if="scope.row.status == 1">待录档</p>
          <p v-if="scope.row.status == 2">已完成</p>
          <p v-if="scope.row.status == 3">已取消</p>
          <p v-if="scope.row.status == 4">已取消</p>
          <p v-if="scope.row.status == 5">进行中</p>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        min-width="120"
        label="操作"
        width="250"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <!--          <el-button-->
          <!--            v-show="scope.row.content !== '该学生已注销'"-->
          <!--            v-hasPermi="['consult:note']"-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-edit"-->
          <!--            @click="recordOpenlist(scope.row)"-->
          <!--          >咨询记录-->
          <!--          </el-button>-->
          <!--          <el-button-->
          <!--            v-show="scope.row.content !== '该学生已注销' && role == 'teacher' && (scope.row.status == 1 || scope.row.status == 2)"-->
          <!--            v-hasPermi="['consult:record']"-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-edit"-->
          <!--            @click="save(scope.row)"-->
          <!--          >录档-->
          <!--          </el-button>-->
          <el-button
            v-if="
              scope.row.arrive === '1' &&
              scope.row.status !== '3' &&
              scope.row.status !== '4'
            "
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleSetProposal(scope.row)"
          >
            建议
          </el-button>
          <el-button
            v-show="scope.row.content !== '该学生已注销'"
            v-hasPermi="['consult:look']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="lookOpentrue(scope.row)"
          >查看
          </el-button>
          <el-button
            v-show="scope.row.content !== '该学生已注销'"
            v-hasPermi="['consult:disabled']"
            size="mini"
            type="text"
            icon="el-icon-turn-off-microphone"
            @click="handleDisabled(scope.row)"
          >禁用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      hide-on-single-page
      background
      layout=" prev, pager, next"
      :total="total"
      :page-size="10"
      :current-page="page"
      @current-change="changepage"
    />

    <!-- 咨询记录 -->
    <el-dialog
      title="咨询记录"
      :visible.sync="recordOpen"
      width="50%"
      class="consultationRecord"
    >
      <div v-show="recordOpenList.length > 0">
        <div
          v-for="(item, index) in recordOpenList"
          :key="index"
          class="recordBox"
        >
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 17px;
            "
          >
            <section>心理咨询师:{{ item.name }}</section>
            <section>咨询方式：{{ item.mode }}</section>
            <section style="color: rgba(164, 173, 179, 1)">
              {{ item.time }}
            </section>
          </div>
          <div style="display: flex; width: 100%">
            <div style="width: 15%">问题描述:</div>
            <div style="width: 85%">
              {{ item.statement }}
            </div>
          </div>
        </div>
        <el-row :gutter="20">
          <el-col>
            <el-pagination
              hide-on-single-page
              class="recordpag"
              background
              layout="prev, pager, next"
              :total="tol"
              :page-size="10"
              @current-change="recordchangepage"
            />
          </el-col>
        </el-row>
      </div>

      <div v-show="recordOpenList.length == 0">暂无咨询记录</div>
    </el-dialog>
    <!--  查看信息  -->
    <el-dialog
      title="查看信息"
      :visible.sync="lookOpen"
      width="45%"
      class="lookopen"
    >
      <div v-loading="lookInfoLoading">
        <el-descriptions :border="true" :column="2">
          <el-descriptions-item label="姓名">{{
              lookinfoStudent.name
            }}</el-descriptions-item>
          <el-descriptions-item label="班级">{{
              lookinfoClass.name
            }}</el-descriptions-item>
          <el-descriptions-item label="学号">{{
              lookinfoStudent.stuNum
            }}</el-descriptions-item>
          <el-descriptions-item label="咨询师">{{
              lookinfoTeacher.name
            }}</el-descriptions-item>
          <el-descriptions-item label="咨询方式">{{
              lookInfo.mode
            }}</el-descriptions-item>
          <el-descriptions-item label="赴约状态">{{
              lookInfo.arrive === "0" ? "未到" : "已到"
            }}</el-descriptions-item>
          <el-descriptions-item label="咨询时间" :span="24"
          >{{ lookinfoScheduling.date }}&nbsp;&nbsp;{{
              lookinfoScheduling.startTime
            }}-{{ lookinfoScheduling.endTime }}</el-descriptions-item
          >
          <el-descriptions-item label="问题描述" :span="24">{{
              lookInfo.content
            }}</el-descriptions-item>
          <el-descriptions-item
            v-if="lookInfo.status !== '3' && lookInfo.status !== '4'"
            label="学生反馈"
            :span="24"
          >
            <span>
              <span>
                {{
                  lookInfo.feedbackScore != null
                    ? Number(lookInfo.feedbackScore) >= 60
                      ? "满意"
                      : "不满意"
                    : null
                }} </span
              ><br />
              {{ lookInfo.studentFeedback }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item
            v-if="lookInfo.status === '3' || lookInfo.status === '4'"
            :label="`${lookInfo.status === '3' ? '学生' : '老师'}取消理由`"
            :span="24"
          >{{ lookInfo.reason }}</el-descriptions-item
          >
          <el-descriptions-item
            v-if="lookInfo.teacherSuggest"
            label="老师建议"
            :span="24"
          >{{ lookInfo.teacherSuggest }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer" />
    </el-dialog>
    <!--    录档-->
    <!--    <el-dialog
      title="录档"
      :visible.sync="saveOpen"
      width="30%"
      class="save"
    >
      <div>
        <el-descriptions title="基本信息" :column="3" border>
          <el-descriptions-item label-class-name="mine-label" label="既往病史">{{
            saveinfo.anamnesis
          }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="mine-label" label="心理诊断经历">{{
            saveinfo.experience
          }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="mine-label" label="服药情况">{{
            saveinfo.medicationSituation
          }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="mine-label" label="家庭情况">{{
            saveinfo.familyInfo
          }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="mine-label" label="其他">{{ saveinfo.remark }}</el-descriptions-item>
          <el-descriptions-item label-class-name="mine-label" label="个案类型">
            <textarea v-model="recordInput.type" class="content" />
          </el-descriptions-item>
          <el-descriptions-item label="个案来源">
            <textarea v-model="recordInput.source" class="content" />
          </el-descriptions-item>
          <el-descriptions-item label="处理级别">
            <textarea v-model="recordInput.level" class="content" />
          </el-descriptions-item>
        </el-descriptions>

        &lt;!&ndash;        <p>咨询内容</p>&ndash;&gt;
        <el-descriptions title="咨询内容" :column="0" border class="el_title">
          <el-descriptions-item label="来访者情绪表现" label-class-name="my-label">
            <textarea v-model="recordInput.emotion" class="area" />
          </el-descriptions-item>
          <el-descriptions-item label="来访者自述（包括近期状况、人际关系、成长中的相关重要事件等）" label-class-name="my-label">
            <textarea v-model="recordInput.statement" class="area" />
          </el-descriptions-item>
          <el-descriptions-item label="来访者身体健康状况、仪表、神态、体态" label-class-name="my-label">
            <textarea v-model="recordInput.health" class="area" />
          </el-descriptions-item>
          <el-descriptions-item label="咨询过程、方法和策略(重要部分课粘贴逐字稿)" label-class-name="my-label">
            <textarea v-model="recordInput.process" class="area" />
          </el-descriptions-item>
          <el-descriptions-item label="咨询印象（问题类型、程度、原因）" label-class-name="my-label">
            <textarea v-model="recordInput.impression" class="area" />
          </el-descriptions-item>
          <el-descriptions-item label="咨询目标（近期、远期）" label-class-name="my-label">
            <textarea v-model="recordInput.target" class="area" />
          </el-descriptions-item>
          <el-descriptions-item label="咨询效果评估与反馈" label-class-name="my-label">
            <textarea v-model="recordInput.result" class="area" />
          </el-descriptions-item>
        </el-descriptions>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveOpen = false">取消</el-button>
        <el-button v-show="rowstatus == 1 ||type == 1" type="primary" @click="addrecordlist">保存</el-button>
        <el-button v-show="rowstatus == 2 && type == 0" type="primary" @click="modify">修改</el-button>

      </span>
    </el-dialog>-->
    <!--  未到更改已到-->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      title="提示"
      class="appoinment"
    >
      <span>确定修改状态为已到?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogchangedetail">确 定</el-button>
      </span>
    </el-dialog>
    <!--  未到更改已到  -->
    <AddProposal ref="AddProposal" @submit="handleQuery" />
    <!--  禁用学生咨询  -->
    <SetDisable ref="SetDisable" @submit="handleQuery" />
  </div>
</template>
<script>
import {
  addRecord,
  appointmentdetailChange,
  getappointmentdetail,
  getappointmentlist,
  Modify,
  findStudentInfo,
  recordInfo,
  classList,
  consultant,
  obtainLoginUserInformation
} from "@/api/Advice/adviceA";
import AddProposal from "@/views/consult/components/AddProposal.vue";
import moment from "moment";
import SetDisable from "@/views/consult/components/SetDisabled.vue";

export default {
  name: "Consult",
  components: { SetDisable, AddProposal },
  dicts: ["sys_come_go"],
  data() {
    return {
      // 角色
      role: "",
      // 咨询师列表
      teacherList: [],
      size: 0,
      type: 0,
      searid: 0,
      // 表格已到,未到更改
      dialogVisible: false,
      changedetailstatus: 0,
      // 表格状态
      changerow: null,
      rowstatus: 1,
      // 日期
      date: null,
      // 咨询时长
      recordtotaltime: 0,
      // 录档改变状态
      cahnggeid: null,
      // 赴约状态
      keep: [
        { label: "未到", value: "0" },
        { label: "已到", value: "1" },
      ],
      // 分页刷新
      page: 1,
      // 咨询记录分页
      tol: 0,
      // 查看信息
      lookInfo: {},
      lookinfoStudent: {},
      lookinfoScheduling: {},
      lookinfoTeacher: {},
      lookinfoClass: {},
      // 上传图片数组
      fileList: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedCmsCategory: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 栏目id数据
      CategoryIdList: [],
      // 总条数
      total: 0,
      // 预约列表数据
      appointmentList: [],
      // 赴约状态
      record: false,
      // cms栏目表格数据
      cmsCategoryList: [],
      // 弹出层标题
      title: "",
      // 咨询记录
      recordOpen: false,
      recordOpenList: [],
      // 查看信息
      lookOpen: false,
      lookInfoLoading: false,
      // 录档
      saveOpen: false,
      // 录档基本信息
      saveinfo: {},

      // 录档输入内容
      recordInput: {
        id: "",
        type: "",
        source: "",
        level: "",
        emotion: "",
        health: "",
        statement: "",
        process: "",
        impression: "",
        target: "",
        result: "",
        time: "",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        psyClass: null,
        stunum: null,
        statusType: null,
        teacherName: null,
        startTime: null,
        endTime: null,
      },
      recordid: 0,
    };
  },

  created() {
    // 获取用户登录信息
    obtainLoginUserInformation().then((res) => {
      this.role = res.roles[0];
      if (this.role === "teacher") {
        this.queryParams.teacherName = res.teacherInfo.name;
      }
      // 预约列表
      this.appointmentlist();
    });

    // 班级列表
    classList({ pageNum: 1, pageSize: 999 }).then((res) => {
      this.CategoryIdList = res.rows;
    });
    // 咨询师列表
    consultant({ pageSize: 999 }).then((res) => {
      this.teacherList = res.rows;
    });
  },
  methods: {
    // 预约详情状态更改
    // 未到变已到
    changedetail(row) {
      const nowTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
      const consultTime = row.psySchedulingdate + " 23:59:59";
      if (moment(nowTime).isAfter(consultTime)) {
        this.$message.warning("当前时间已超过咨询当天,禁止修改");
      } else {
        this.changedetailstatus = row;
        this.dialogVisible = true;
      }
    },
    // 禁用学生
    handleDisabled(row) {
      this.$refs.SetDisable.open(row);
    },
    dialogchangedetail() {
      if (this.changedetailstatus.arrive === "0") {
        appointmentdetailChange({
          id: this.changedetailstatus.id,
          arrive: "1",
        }).then((res) => {
          if (res.code === 200) {
            this.changedetailstatus.arrive = "1";
          }
        });
        this.dialogVisible = false;
      } else {
        this.$message({ type: "warning", message: "此次预约已取消!" });
        this.dialogVisible = false;
      }
    },
    // 录档
    save(row) {
      findStudentInfo(row.studentid).then((res) => {
        this.saveinfo = res.data;
      });
      this.saveOpen = true;
      this.changerow = row;
      this.rowstatus = row.status;
      this.cahnggeid = row.id;
      if (row.status === "1") {
        this.recordInput = {
          id: "",
          type: "",
          source: "",
          level: "",
          emotion: "",
          health: "",
          statement: "",
          process: "",
          impression: "",
          target: "",
          result: "",
          time: "",
        };
      }
      if (row.status === "2") {
        recordInfo({ studentId: this.changerow.studentid }).then((res) => {
          if (res.rows.length !== 0) {
            this.recordInput = res.rows[res.rows.length - 1];
          } else {
            this.type = 1;
            this.recordInput = {
              id: "",
              type: "",
              source: "",
              level: "",
              emotion: "",
              health: "",
              statement: "",
              process: "",
              impression: "",
              target: "",
              result: "",
              time: "",
            };
          }
        });
      }
    },
    handleSetProposal(item) {
      this.$refs.AddProposal.open(item);
    },
    // 录档更改
    modify() {
      Modify(this.recordInput).then((res) => {
        if (res.code === 200) {
          this.$message({ type: "success", message: "修改成功!" });
          this.saveOpen = false;
        }
      });
    },
    // 获取当前时间
    getTime() {
      const date = new Date();
      const sign2 = ":";
      const year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      let minutes = date.getMinutes(); // 分
      let seconds = date.getSeconds(); // 秒
      // const weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
      // const week = weekArr[date.getDay()]
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        "-" +
        hour +
        sign2 +
        minutes +
        sign2 +
        seconds
      );
    },
    // 录档保存
    addrecordlist() {
      addRecord({
        id: this.cahnggeid,
        appointmentId: this.cahnggeid,
        studentId: this.changerow.studentid,
        teacherId: this.changerow.teacherId,
        type: this.recordInput.type,
        source: this.recordInput.source,
        level: this.recordInput.level,
        emotion: this.recordInput.emotion,
        health: this.recordInput.health,
        statement: this.recordInput.statement,
        process: this.recordInput.process,
        impression: this.recordInput.impression,
        result: this.recordInput.result,
        target: this.recordInput.target,
        time: this.getTime(),
      }).then((res) => {
        if (res.code === 200) {
          this.$message({ type: "success", message: "保存成功!" });
          this.saveOpen = false;
          this.changerow.status = 2;
          appointmentdetailChange({ id: this.cahnggeid, status: 2 }).then(
            () => {}
          );
          this.type = 0;
          this.recordInput = {
            id: "",
            type: "",
            source: "",
            level: "",
            emotion: "",
            health: "",
            statement: "",
            process: "",
            impression: "",
            target: "",
            result: "",
            time: "",
          };
        }
      });
    },
    // 咨询记录
    recordOpenlist(row) {
      this.recordid = row.studentid;
      recordInfo({ studentId: row.studentid }).then((res) => {
        if (res.rows.length !== 0) {
          this.tol = res.total - 0;
          this.recordOpenList = res.rows.reverse();
        } else {
          this.recordOpenList = res.rows;
        }
      });
      this.recordOpen = true;
    },
    // 预约列表
    appointmentlist() {
      this.appointmentList = [];
      getappointmentlist(this.queryParams).then((resp) => {
        if (resp.code === 200) {
          this.loading = false;
          this.size = resp.total;
          this.total = resp.total - 0;
          // 时间
          this.recordtotaltime = Number(resp.data.totalDuration);
          resp.rows.forEach((item, index) => {
            if (item.psyClass == null || item.psyStudent == null) {
              item.content = "该学生已注销";
              this.appointmentList.push({
                sort: index + 1,
                content: item.content,
              });
            } else if (item.psyTeacher == null) {
              this.appointmentList.push({
                sort: index + 1,
                studentid: item.psyStudent.id,
                id: item.id,
                arrive: item.arrive,
                peopleType: item.peopleType,
                studentName: item.psyStudent.name,
                class: item.psyClass.name,
                stuNmu: item.psyStudent.stuNum,
                phoneNumber: item.psyStudent.phoneNumber,
                remainingForbiddenHour: item.psyStudent.remainingForbiddenHour,
                teacherName: "暂无老师",
                psySchedulingdate: item.psyScheduling.date,
                psySchedulingstartTime: item.psyScheduling.startTime,
                psySchedulingendTime: item.psyScheduling.endTime,
                content: item.content,
                startTime: item.createTime,
                endTime: item.updateTime,
                mode: item.mode,
                duration: item.duration,
                status: item.status,
              });
            } else {
              this.appointmentList.push({
                sort: index + 1,
                studentid: item.psyStudent.id,
                id: item.id,
                arrive: item.arrive,
                peopleType: item.peopleType,
                studentName: item.psyStudent.name,
                class: item.psyClass.name,
                stuNmu: item.psyStudent.stuNum,
                phoneNumber: item.psyStudent.phoneNumber,
                remainingForbiddenHour: item.psyStudent.remainingForbiddenHour,
                teacherId: item.psyTeacher.id,
                teacherName: item.psyTeacher.name,
                psySchedulingdate: item.psyScheduling.date,
                psySchedulingstartTime: item.psyScheduling.startTime,
                psySchedulingendTime: item.psyScheduling.endTime,
                content: item.content,
                startTime: item.createTime,
                endTime: item.updateTime,
                mode: item.mode,
                duration: item.duration,
                status: item.status,
              });
            }
          });
        }
      });
    },
    // 页码改变
    changepage(page) {
      this.page = page;
      getappointmentlist({
        pageNum: page,
        pageSize: 10,
        psyClass: this.queryParams.psyClass,
        stuName: this.queryParams.title,
        stuNum: this.queryParams.stunum,
        teacherName:
          this.queryParams.teacherName === "全部" ||
          this.queryParams.teacherName === ""
            ? null
            : this.queryParams.teacherName,
        startTime: this.date == null || this.date === "" ? null : this.date[0],
        endTime: this.date == null || this.date === "" ? null : this.date[1],
        statusType: this.queryParams.statusType,
      }).then((res) => {
        this.total = res.total - 0;
        this.appointmentList = [];
        res.rows.forEach((item, index) => {
          if (item.psyClass == null || item.psyStudent == null) {
            item.content = "该学生已注销";
            this.appointmentList.push({
              sort: index + 1 + (page - 1) * this.queryParams.pageSize,
              content: item.content,
            });
          } else if (item.psyTeacher == null) {
            this.appointmentList.push({
              sort: index + 1 + (page - 1) * this.queryParams.pageSize,
              studentid: item.psyStudent.id,
              arrive: item.arrive,
              peopleType: item.peopleType,
              id: item.id,
              studentName: item.psyStudent.name,
              class: item.psyClass.name,
              stuNmu: item.psyStudent.stuNum,
              phoneNumber: item.psyStudent.phoneNumber,
              remainingForbiddenHour: item.psyStudent.remainingForbiddenHour,
              teacherName: "暂无老师",
              content: item.content,
              psySchedulingdate: item.psyScheduling.date,
              psySchedulingstartTime: item.psyScheduling.startTime,
              psySchedulingendTime: item.psyScheduling.endTime,
              startTime: item.createTime,
              endTime: item.updateTime,
              mode: item.mode,
              duration: item.duration,
              status: item.status,
            });
          } else {
            this.appointmentList.push({
              sort: index + 1 + (page - 1) * this.queryParams.pageSize,
              studentid: item.psyStudent.id,
              arrive: item.arrive,
              peopleType: item.peopleType,
              id: item.id,
              studentName: item.psyStudent.name,
              class: item.psyClass.name,
              stuNmu: item.psyStudent.stuNum,
              phoneNumber: item.psyStudent.phoneNumber,
              remainingForbiddenHour: item.psyStudent.remainingForbiddenHour,
              teacherName: item.psyTeacher.name,
              teacherId: item.psyTeacher.id,
              content: item.content,
              psySchedulingdate: item.psyScheduling.date,
              psySchedulingstartTime: item.psyScheduling.startTime,
              psySchedulingendTime: item.psyScheduling.endTime,
              startTime: item.createTime,
              endTime: item.updateTime,
              mode: item.mode,
              duration: item.duration,
              status: item.status,
            });
          }
        });
      });
    },

    // 咨询记录页码改变
    recordchangepage(page) {
      recordInfo({
        pageNum: page,
        pageSize: 10,
        studentId: this.recordid,
      }).then((res) => {
        if (res.rows.length !== 0) {
          this.tol = res.total - 0;
          this.recordOpenList = res.rows;
        } else {
          this.recordOpenList = res.rows;
        }
      });
    },
    // 查看信息
    lookOpentrue(row) {
      if (row.teacherName === "暂无老师") {
        this.$message({ type: "success", message: "此次预约无老师信息!" });
      } else {
        this.lookInfoLoading = true;
        getappointmentdetail(row.id).then((res) => {
          this.lookInfoLoading = false;
          this.lookInfo = res.data;
          this.lookInfo.status = row.status;
          if (res.data.psyTeacher == null) {
            this.lookinfoTeacher.name = "暂无咨询师";
          } else {
            this.lookinfoTeacher = res.data.psyTeacher;
          }
          this.lookinfoStudent = res.data.psyStudent;
          this.lookinfoClass = res.data.psyClass;
          this.lookinfoScheduling = res.data.psyScheduling;
        });
        this.lookOpen = true;
      }
    },

    // 搜索
    handleQuery() {
      this.recordtotaltime = 0;
      this.total = 0;
      this.page = 1;
      getappointmentlist({
        pageNum: 1,
        pageSize: 10,
        psyClass: this.queryParams.psyClass,
        stuName: this.queryParams.title,
        stuNum: this.queryParams.stunum,
        teacherName:
          this.queryParams.teacherName === "全部" ||
          this.queryParams.teacherName === ""
            ? null
            : this.queryParams.teacherName,
        startTime: this.date == null ? null : this.date[0],
        endTime: this.date == null ? null : this.date[1],
        statusType: this.queryParams.statusType,
      }).then((resp) => {
        this.total = resp.total - 0;
        this.appointmentList = [];
        this.recordtotaltime = Number(resp.data.totalDuration);
        resp.rows.forEach((item, index) => {
          if (item.psyClass == null || item.psyStudent == null) {
            item.content = "该学生已注销";
          } else if (item.psyTeacher == null) {
            this.appointmentList.push({
              sort: index + 1,
              studentid: item.psyStudent.id,
              id: item.id,
              arrive: item.arrive,
              peopleType: item.peopleType,
              studentName: item.psyStudent.name,
              class: item.psyClass.name,
              stuNmu: item.psyStudent.stuNum,
              phoneNumber: item.psyStudent.phoneNumber,
              remainingForbiddenHour: item.psyStudent.remainingForbiddenHour,
              teacherName: "暂无老师",
              content: item.content,
              psySchedulingdate: item.psyScheduling.date,
              psySchedulingstartTime: item.psyScheduling.startTime,
              psySchedulingendTime: item.psyScheduling.endTime,
              startTime: item.createTime,
              endTime: item.updateTime,
              mode: item.mode,
              duration: item.duration,
              status: item.status,
            });
          } else {
            this.appointmentList.push({
              sort: index + 1,
              studentid: item.psyStudent.id,
              id: item.id,
              arrive: item.arrive,
              peopleType: item.peopleType,
              studentName: item.psyStudent.name,
              class: item.psyClass.name,
              stuNmu: item.psyStudent.stuNum,
              phoneNumber: item.psyStudent.phoneNumber,
              remainingForbiddenHour: item.psyStudent.remainingForbiddenHour,
              teacherName: item.psyTeacher.name,
              teacherId: item.psyTeacher.id,
              content: item.content,
              psySchedulingdate: item.psyScheduling.date,
              psySchedulingstartTime: item.psyScheduling.startTime,
              psySchedulingendTime: item.psyScheduling.endTime,
              startTime: item.createTime,
              endTime: item.updateTime,
              mode: item.mode,
              duration: item.duration,
              status: item.status,
            });
          }
        });
      });
    },
    // 重置
    resetQuery() {
      this.page = 1;
      this.date = null;
      if (this.role === "teacher") {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          title: null,
          psyClass: null,
          stunum: null,
          teacherName: this.queryParams.teacherName,
          statusType: null,
          startTime: null,
          endTime: null,
        };
      } else {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          title: null,
          psyClass: null,
          stunum: null,
          teacherName: null,
          statusType: null,
          startTime: null,
          endTime: null,
        };
      }
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.titleclass {
  font-size: 14px;
  margin-bottom: 10px;

  span {
    margin-right: 20px;
  }
}

.searchform {
  min-width: 300px;
}

//查看信息
.lookopen {
  ::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 15vh !important;
    min-width: 650px;
    max-width: 690px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 7px;
    border: 1px solid rgba(187, 187, 187, 1);

    .el-dialog__header {
      background-color: rgba(24, 146, 255, 1);
      padding: 20px;
      height: 47px;
      display: flex;
      align-items: center;
      border-radius: 7px 7px 0px 0px;

      .el-dialog__title {
        font-size: 16px;
        color: rgba(255, 255, 255, 1);
      }

      .el-dialog__headerbtn {
        top: 15px;

        .el-dialog__close {
          color: #ffffff;
        }
      }
    }

    .el-dialog__body {
      padding: 25px 26px 10px 26px;

      .recordBox {
        padding: 25px 14px 25px 19px;
        line-height: 20px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(203, 203, 203, 1);
        color: rgba(16, 16, 16, 1);

        .record {
          margin-bottom: -10px;

          section {
            margin-bottom: 30px;
            margin-right: 10px;

            span {
              color: rgba(16, 16, 16, 1);
            }
          }
        }

        .problem {
          margin-bottom: 10px;
          overflow: hidden;

          span:nth-child(1) {
            float: left;
            width: 15%;
          }

          span:nth-child(2) {
            float: right;
            width: 85%;
          }
        }
      }
    }
  }
}

::v-deep .el-form-item__label {
  width: auto !important;
}

//录档
.save {
  ::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 15vh !important;
    min-width: 650px;
    max-width: 690px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 7px;
    border: 1px solid rgba(187, 187, 187, 1);

    .el-dialog__header {
      background-color: rgba(24, 146, 255, 1);
      padding: 20px;
      height: 47px;
      display: flex;
      align-items: center;
      border-radius: 7px 7px 0px 0px;

      .el-dialog__title {
        font-size: 16px;
        color: rgba(255, 255, 255, 1);
      }

      .el-dialog__headerbtn {
        top: 15px;

        .el-dialog__close {
          color: #ffffff;
        }
      }
    }

    .el-dialog__body {
      padding: 25px 26px 10px 26px;
      margin-bottom: 20px;

      .mine-label {
        width: 80px;
      }

      .el_title {
        margin-top: 20px;
      }

      .content {
        width: 100%;
        height: 100%;
        border: none;
        resize: none;
        outline: medium;
      }

      .area {
        width: 394px;
        height: 83px;
        border: none;
        resize: none;
        outline: medium;
      }

      p {
        color: rgba(16, 16, 16, 1);
        font-size: 18px;
      }

      .cell {
        text-align: left;
      }

      .my-label {
        background: none;
        width: 150px;
      }
    }

    .el-dialog__footer {
      text-align: center;
    }
  }
}

//咨询记录
.consultationRecord {
  ::v-deep .el-dialog:not(.is-fullscreen) {
    min-width: 650px;
    max-width: 690px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 7px;
    border: 1px solid rgba(187, 187, 187, 1);

    .el-dialog__header {
      background-color: #1892ff;
      //padding: 10px 25px;

      padding: 20px;
      height: 47px;
      display: flex;
      align-items: center;
      border-radius: 7px 7px 0px 0px;

      .el-dialog__title {
        font-size: 15px;
        color: white;
      }

      .el-icon-close:before {
        color: white;
      }
    }

    .el-dialog__body {
      .recordBox {
        border: 1px solid rgba(203, 203, 203, 1);
        margin-bottom: 10px;
        box-sizing: border-box;
        padding: 10px;
      }

      .recordpag {
        display: flex;
        justify-content: center;
      }
    }
  }
}

//赴约状态弹框
.appoinment {
  ::v-deep .el-dialog:not(.is-fullscreen) {
    min-width: 200px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 7px;
    border: 1px solid rgba(187, 187, 187, 1);

    .el-dialog__header {
      background-color: rgba(24, 146, 255, 1);
      padding: 20px;
      height: 47px;
      display: flex;
      align-items: center;
      border-radius: 7px 7px 0px 0px;

      .el-dialog__title {
        font-size: 16px;
        color: rgba(255, 255, 255, 1);
      }

      .el-dialog__headerbtn {
        top: 15px;

        .el-dialog__close {
          color: #ffffff;
        }
      }
    }

    .el-dialog__body {
      font-size: 18px;
    }
  }
}

::v-deep .editor,
.ql-toolbar {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

::v-deep .ql-toolbar.ql-snow + .ql-container.ql-snow {
  margin-bottom: 20px;
}

::v-deep .el-range-editor.el-input__inner {
  width: 100% !important;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
